<template>
	<view class="centerbox">
		<view class="rechTop">
			<view class="imgTitele flex">
				<image src="/static/images/toptitleImage.png"></image>
			</view>
			<view class="AmountBox">
				<view class="flexbox">
					<view class="Amount_title">储值金额</view>
					<view class="uni-form-item uni-column inputBox">
						<view class="title">$</view>
						<input class="uni-input" v-model="Amount" placeholder="请输入金额" placeholder-class="placeholder" />
					</view>
				</view>
			</view>
		</view>
		<view class="Payment">
			<text class="Amount_title">付款方式</text>
			<view class="uni-list">
				<radio-group @change="radioChange">
					<view class="payment-item" v-for="(item, index) in items" :key="item.value">
						<label class="payment-container">
							<!-- 左侧：图标和支付名称 -->
							<view class="payment-left">
								<image class="payment-icon" :src="item.icon" mode="aspectFit"></image>
								<text class="payment-name">{{item.name}}</text>
							</view>
							<!-- 右侧：选择框 -->
							<view class="payment-right">
								<radio :value="item.value" :checked="index === current" />
							</view>
						</label>
					</view>
				</radio-group>
			</view>
		</view>
		<view class="Advertising">
			<view class="flexbox">
				广告位
			</view>
		</view>
		<view class="btn">
			<button class="login-btn" @click="handleAmount">确认</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	import { httpPost } from '@/utils/http'
	import { submitForm } from '@/utils/formSubmit'
	import { useUserStore } from '@/store'
	const userStore = useUserStore()
	const items = [
		{ value: 'Line', name: 'Line pay', icon: '/static/images/Line.png' },
		{ value: 'Apple', name: 'Apple pay', icon: '/static/images/apple.png' },
		{ value: 'Jiekou', name: '街口支付', icon: '/static/images/Jiekou.png' },
		{ value: 'mastercard', name: 'mastercard', icon: '/static/images/mastercode.png' },
		{ value: 'YouCard', name: '悠游卡', icon: '/static/images/youcard.png' },
		{ value: 'VISA', name: 'VISA', icon: '/static/images/visa.png' },
	]
	// 支付金额
	const Amount = ref('')
	// 支付方式
	const radioType = ref('')
	const radioChange = (item) => {
		radioType.value = item.detail.value
	}
	// 提交
	const handleAmount = async () => {
	  if (!validateInput()) return
	  try {
	    uni.showLoading({ title: '处理中...', mask: true })
	    const response = await PaymentClick()
		console.log(response);
	    submitPaymentForm(response.data)
	  } catch (error) {
	    handleError(error)
	  } finally {
	    uni.hideLoading()
	  }
	}
	// 验证输入
	const validateInput = (): boolean => {
	  if (!Amount.value) {
	    uni.showToast({ title: '请输入金额', icon: 'none' })
	    return false
	  }
	  if (!radioType.value) {
	    uni.showToast({ title: '请选择支付方式', icon: 'none' })
	    return false
	  }
	  return true
	}
	// 错误处理
	const handleError = (error: any) => {
	  console.error('支付失败:', error)
	  uni.showToast({ 
	    title: error.response?.data?.message || '支付失败',
	    icon: 'none'
	  })
	}
	// 支付方式映射为渠道代码
	const getChannelCode = (type: string): number => {
	  const channelMap: Record<string, number> = {
	    'Line': 1,
	    'Apple': 2,
	    'Jiekou': 3,
	    'mastercard': 4,
	    'YouCard': 5,
	    'VISA': 6
	  }
	  return channelMap[type] || 0
	}
	const token = uni.getStorageSync('token');
	const PaymentClick = async () => {
		try {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			return  httpPost(
				'/miniapp/payment/',
				{
					"amount": Amount.value,
					"channel": 0
				},
				{},
				{
					'Authorization': `Bearer ${userStore.userInfo.token}`,
					'Content-Type': 'application/json;charset=utf-8'
				}
			);
		} catch (error) {
			console.error('请求失败:', error);
			uni.showToast({ title: '支付失败', icon: 'none' });
		} finally {
			uni.hideLoading();
		}
	};
	// 提交支付表单
	const submitPaymentForm = (data: PaymentResponse) => {
	  submitForm('https://api.payuni.com.tw/api/upp', {
	    MerID: data.MerID,
	    Version: '1.0',
	    EncryptInfo: data.EncryptInfo,
	    HashInfo: data.HashInfo
	  })
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.Amount_title {
		font-size: 32rpx;
		color: rgba(0, 0, 0, 1);
	}

	.centerbox {
		width: 100%;
		height: 100%;

		.rechTop {
			width: 100%;
			height: 400rpx;
			background-color: black;
			position: relative;
			padding-top: constant(safe-area-inset-top);
			/* 兼容iOS 11.0-11.2 */
			padding-top: env(safe-area-inset-top);

			.imgTitele>image {
				margin-top: 60rpx;
				width: 360rpx;
				height: 40rpx;
			}

			.AmountBox {
				position: absolute;
				width: calc(100% - 80rpx);
				height: 320rpx;
				bottom: -80rpx;
				left: 40rpx;
				padding: 30rpx;
				box-sizing: border-box;
				background-color: white;
				border-radius: 20rpx;
				box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);

				.inputBox {
					height: 80rpx;
					display: flex;
					margin-top: 130rpx;
					align-items: flex-end;

					.placeholder {
						font-size: 50rpx;
						font-weight: 400;
						letter-spacing: 0px;
						color: rgba(153, 153, 153, 1);
					}

					.title {
						font-size: 40rpx;
						color: rgba(0, 0, 0, 1);
						margin-right: 10rpx;
						margin-bottom: 8rpx;
					}

					.uni-input {
						width: 100%;
						height: 80rpx;
						line-height: normal;

						::v-deep(.uni-input-input) {
							font-size: 50rpx;
						}
					}

				}
			}
		}

		.Payment {
			width: calc(100% - 80rpx);
			padding: 30rpx;
			margin-left: 40rpx;
			margin-top: 120rpx;
			box-sizing: border-box;
			background-color: white;
			border-radius: 20rpx;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);

			.payment-item {
				padding: 30rpx 0;
				border-bottom: 1px solid #e6e6e6;
			}

			.payment-item:last-child {
				border-bottom: none;
			}

			.payment-container {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
			}

			.payment-left {
				display: flex;
				align-items: center;
			}

			.payment-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.payment-name {
				font-size: 28rpx;
				color: #333333;
			}
		}

		.Advertising {
			width: calc(100% - 80rpx);
			height: 200rpx;
			margin-left: 40rpx;
			margin-top: 32rpx;
			border-radius: 20rpx;
			background-color: white;
			text-align: center;
			line-height: 200rpx;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
		}

		.btn {
			padding-bottom: 20rpx;
		}

		.login-btn {
			width: calc(100% - 80rpx);
			height: 80rpx;
			margin-top: 32rpx;
			margin-left: 40rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
			opacity: 1;
			border-radius: 40rpx;
			color: #fff;
			font-size: 30rpx;
			background: rgba(0, 0, 0, 1);

		}
	}
</style>